<!--用户头像-->
<template>
  <div class="example">
    <button class="button-block" @click="open1">警告</button>
    <button class="button-block" @click="open2">错误</button>
    <button class="button-block" @click="open3">成功</button>
    <div class="tableClass mt20">
      <table cellspacing="0">
        <tr>
          <th>1) 调用方法</th>
        </tr>
        <tr>
          <td>
            <p class="mb20">this.$message.warning('警告了哦，这是一条警告消息')</p>
            <p class="mb20">this.$message.error('错了哦，这是一条错误消息')</p>
            <p class="mb20">this.$message.success('成功了哦，这是一条成功消息')</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        explameCall:
          `
            <zz-user
            srcProps="" 用户头像 url 或者key 都可以
            width="3.875" 头像显示宽度
            ></zz-user>
          `
      }
    },
    methods: {
      open1 () {
        this.$message.warning('警告了哦，这是一条警告消息')
      },
      open2 () {
        this.$message.error('错了哦，这是一条错误消息')
      },
      open3 () {
        this.$message.success('成功了哦，这是一条成功消息')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 10%;
    }
    .example-right{
      float: right;
      width: 78%;
      background: #fff;
    }
  }
</style>
